<style scoped>
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
	.title-top-center{
		text-align:center;		

	}
	.title-top-right{
		float:right
	}
	.btn_tools{
		padding:6px 10px 6px 10px;
		background:#eee;
		border-radius: 20px;
	}
	.ivu-cell-extra{
		color:#ed4014;	
	}
</style>
<template>
	<Row type="flex" justify="center" align="top" class="code-row-bg">
		<Col span="1" style="background:#3F88D5;height:800px">

				<div class="icons-item" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;">
                        <Avatar icon="ios-person" />
                </div>

                <ul style="padding: 0!important;list-style: none!important;">
                <a class="icons-item" style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
                <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
                <p>管理端</p>
                </a>


                <a class="icons-item" style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
                <Icon type="ios-people" size="24" style="color:#ffffff;"/>
                <p>员工端</p>
                </a>

                <a class="icons-item" style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
                <Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>
                <p>问题管理</p>
                </a>

                </ul>

				<!--
		         <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses" style="height:800px; text-align: center;">
                    <MenuItem name="1-0" style="padding:0;width:auto"><span>SCS</span></MenuItem>

                    <MenuItem name="1-1" style="width:auto">
                        <Icon type="ios-desktop"></Icon>
                        <span>管理端</span>
                    </MenuItem>
					<MenuItem name="2-1">
                        <Icon type="ios-people"></Icon>
                        <span>员工端</span>
                    </MenuItem>
					<MenuItem name="3-1">
                        <Icon type="ios-help-circle"></Icon>
                        <span>问题管理</span>
                    </MenuItem>
				</Menu>
				-->

		</Col>
        <Col span="4">
			<!--
		    <Card title="管理单元" :padding="0">
			-->
			<CellGroup>
				<!--
                <Cell title="重庆江北" label="C519 A班" />
                <Cell title="Display right content" extra="details" />
                <Cell title="Link" extra="details" to="/components/button" />
                <Cell title="Selected" selected />
				-->

                <Cell title="全部单元" to="details"/>

                <Cell title="重庆江北" label="C519 A班" to="/components/badge" selected>
                    <Badge :count="3" slot="extra" />
                </Cell>

                <Cell title="浙江杭州" label="CD539 B班" to="/components/badge">
                    <Badge :count="5" slot="extra" />
                </Cell>
            </CellGroup>	
			<!--
			</Card>
			-->
		</Col>
        <Col span="19" style="background:#f5f7f9">
			<Layout>
                <Content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
					<Row type="flex" justify="space-between">
					<Col span="8">
					
						<!--<Button type="text">年成绩</Button>-->
						<!--<Button type="text">月成绩</Button>-->
						<Button type="primary">日成绩</Button>
	
					</Col>
					<Col span="4" class="title-top-center" style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;"></Col>
					<Col span="12">

					<!--
					<Button :size="buttonSize" icon="ios-share-alt" type="light" style="float:right"></Button>
					<Button :size="buttonSize" icon="ios-cog" type="light" style="float:right;margin-right:10px;"></Button>
					-->
					<a type="text" size="large" style="float:right" class="btn_tools">
						<Icon type="ios-share-alt" size="20"></Icon>
					</a>
					<a type="text" size="large" style="float:right;margin-right:10px;" class="btn_tools">
						<Icon type="ios-cog" size="20"></Icon>
					</a>

					<DatePicker size="large" type="date" placeholder="选择日期" :editable="false" :clearable="false" style="float:right;margin-right:10px;"></DatePicker>


					<!--
						<a type="text" size="large" style="float:right">
									<Icon type="ios-share-alt" size="20"></Icon>
						</a>
						<a type="text" size="large" style="float:right">
									<Icon type="ios-cog" size="20"></Icon>
						</a>
						-->


					</Col>
					</Row>

                    </Breadcrumb>
					 <Card :bordered="true" dis-hover>
					 <p slot="title" style="height:32px;">地区筛选
						<Dropdown style="margin-left: 20px">
        <Button type="light">
            所有地区
            <Icon type="ios-arrow-down"></Icon>
        </Button>
        <DropdownMenu slot="list">
            <DropdownItem>重庆</DropdownItem>
            <DropdownItem>安徽芜湖</DropdownItem>
            <DropdownItem>南京</DropdownItem>
            <DropdownItem divided>所有地区</DropdownItem>
        </DropdownMenu>
    </Dropdown>
					 </p>
					 <Button slot="extra"  type="primary" shape="circle" icon="ios-add"  to="/additem">新建管理单元</Button>

					 <div style="height: 620px">
					 
					 <Divider orientation="left">班组战绩</Divider>

						<Row type="flex" span="24">
                                <Col span="6">
									<Badge :count="5">
									   <Cell title="重庆江北" label="C519 A班" extra="A" to="/components/badge" style="width:144px;border: 1px solid #dcdee2;border-radius: 6px;">
									   </Cell>
									</Badge>
                                </Col>
                                <Col span="6">                                                                                                                                    
									<Badge :count="5">
									   <Cell title="重庆江北" label="C519 A班" extra="B" to="/components/badge" style="width:144px;border: 1px solid #dcdee2;border-radius: 6px;">
									   </Cell>
									</Badge>
                                </Col>
								<Col span="6">                                                                                                                                    
									<Badge :count="5">
									   <Cell title="重庆江北" label="C519 A班" to="/components/badge" style="width:144px;border: 1px solid #dcdee2;border-radius: 6px;">
									   </Cell>
									</Badge>
                                </Col>
								<Col span="6">                                                                                                                                    
									<Badge :count="5">
									   <Cell title="重庆江北" label="C519 A班" to="/components/badge" style="width:144px;border: 1px solid #dcdee2;border-radius: 6px;">
									   </Cell>
									</Badge>
                                </Col>

                        </Row>


					 </div>
					 
					 </Card>
					 <!--
					 <div style="margin-top: 20px">
                    <Card>
					 <p slot="title">问题&待处理事项</p>
                        <div style="height: 300px">Content</div>
                    </Card>
					</div>
					-->
                </Content>
            </Layout>

		</Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                isCollapsed: false
            };
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>

